module UI.Svg.Elements exposing (blockstackLogo, dropboxLogo, ipfsLogo, loading, remoteStorageLogo, solidLogo, textileLogo, threeBoxLogo)

import Color
import Svg exposing (..)
import Svg.Attributes exposing (..)
import UI.Kit



-- LOGOS


blockstackLogo : Svg Never
blockstackLogo =
    svg
        [ height "16"
        , viewBox "0 0 80 80"
        , width "16"
        ]
        [ Svg.path
            [ d "M0.986947 7.23422C-3.72529e-07 9.51492 -2.53999e-07 12.4233 2.57986e-10 18.24L9.51418e-07 40L1.90258e-06 61.76C2.15683e-06 67.5767 0 70.4851 0.986947 72.7658C2.19911 75.5669 4.43309 77.8009 7.23423 79.0131C9.51492 80 12.4233 80 18.24 80H40H61.76C67.5767 80 70.4851 80 72.7658 79.0131C75.5669 77.8009 77.8009 75.5669 79.0131 72.7658C80 70.4851 80 67.5767 80 61.76V40V18.24C80 12.4233 80 9.51492 79.0131 7.23422C77.8009 4.43309 75.5669 2.1991 72.7658 0.986942C70.4851 -4.47035e-07 67.5767 -2.53999e-07 61.76 2.58033e-10L40 9.51418e-07L18.24 1.90258e-06C12.4233 2.15684e-06 9.375 1.93715e-06 7.23423 0.986945C4.43309 2.19911 2.19911 4.43309 0.986947 7.23422ZM52.7711 34.4643C48.7788 34.4643 45.5416 31.2272 45.5416 27.2341C45.5416 23.2429 48.7788 20.0059 52.7711 20.0059C56.7633 20.0059 60.0005 23.2429 60.0005 27.2341C60.0005 31.2272 56.7633 34.4643 52.7711 34.4643ZM34.4525 27.2334C34.4525 31.2239 31.2169 34.4596 27.2255 34.4596C23.2361 34.4596 20.0005 31.2239 20.0005 27.2334C20.0005 23.2429 23.2361 20.0072 27.2255 20.0072C31.2169 20.0072 34.4525 23.2429 34.4525 27.2334ZM52.7718 45.5639C48.7786 45.5639 45.5415 48.8011 45.5415 52.7934C45.5415 56.7856 48.7786 60.0228 52.7718 60.0228C56.7629 60.0228 60 56.7856 60 52.7934C60 48.8011 56.7629 45.5639 52.7718 45.5639ZM27.2261 45.571C31.2166 45.571 34.4522 48.8066 34.4522 52.7979C34.4522 56.7872 31.2166 60.0228 27.2261 60.0228C23.2357 60.0228 20 56.7872 20 52.7979C20 48.8066 23.2357 45.571 27.2261 45.571Z"

            --
            , fill (Color.toCssString UI.Kit.colors.text)
            , fillRule "evenodd"
            , clipRule "evenodd"
            ]
            []
        ]


ipfsLogo : Svg Never
ipfsLogo =
    svg
        [ height "16"
        , viewBox "0 0 511.99999 511.99998"
        , width "16"
        ]
        [ -- Group 1
          ----------
          g
            [ transform "translate(-50.017 -515.51)" ]
            [ Svg.path
                [ d "m283.13 546.35-160.74 92.806c0.32126 2.8543 0.32125 5.7352 0 8.5894l160.75 92.806c13.554-10.001 32.043-10.001 45.597 0l160.75-92.807c-0.32126-2.8543-0.32293-5.7338-0.001-8.588l-160.74-92.806c-13.554 10.001-32.044 10.001-45.599 0zm221.79 127.03-160.92 93.84c1.884 16.739-7.3611 32.751-22.799 39.489l0.18062 184.58c2.6325 1.1489 5.1267 2.5886 7.438 4.294l160.75-92.805c-1.884-16.739 7.3611-32.752 22.799-39.49v-185.61c-2.6325-1.1489-5.1281-2.5886-7.4394-4.294zm-397.81 1.0315c-2.3112 1.7054-4.8054 3.1465-7.438 4.2954v185.61c15.438 6.7378 24.683 22.75 22.799 39.489l160.74 92.806c2.3112-1.7054 4.8069-3.1465 7.4394-4.2954v-185.61c-15.438-6.7378-24.683-22.75-22.799-39.489l-160.74-92.81z"
                , fill "#fff"
                ]
                []
            ]

        -- Group 2
        ----------
        , g
            [ fill (Color.toCssString UI.Kit.colors.text)
            , transform "translate(0 -196.66)"
            ]
            [ Svg.path
                [ d "m256 708.66 221.7-128v-256l-221.7 128v256z"
                , fillOpacity "1"
                ]
                []
            , Svg.path
                [ d "m256 708.66v-256l-221.7-128v256l221.7 128z"
                , fillOpacity ".75"
                ]
                []
            , Svg.path
                [ d "m34.298 324.66 221.7 128 221.7-128-221.7-128-221.7 128z"
                , fillOpacity ".5"
                ]
                []
            ]
        ]


dropboxLogo : Svg Never
dropboxLogo =
    svg
        [ height "16"
        , viewBox "0 0 43 40"
        , width "16"
        ]
        [ Svg.path
            [ d "m12.5 0l-12.5 8.1 8.7 7 12.5-7.8-8.7-7.3zm-12.5 21.9l12.5 8.2 8.7-7.3-12.5-7.7-8.7 6.8zm21.2 0.9l8.8 7.3 12.4-8.1-8.6-6.9-12.6 7.7zm21.2-14.7l-12.4-8.1-8.8 7.3 12.6 7.8 8.6-7zm-21.1 16.3l-8.8 7.3-3.7-2.5v2.8l12.5 7.5 12.5-7.5v-2.8l-3.8 2.5-8.7-7.3z"

            --
            , fill (Color.toCssString UI.Kit.colors.text)
            ]
            []
        ]


remoteStorageLogo : Svg Never
remoteStorageLogo =
    svg
        [ clipRule "evenodd"
        , fillRule "evenodd"
        , height "16"
        , imageRendering "optimizeQuality"
        , shapeRendering "geometricPrecision"
        , textRendering "geometricPrecision"
        , viewBox "0 0 739 853"
        , width "16"
        ]
        [ polygon
            [ points "370,754 0,542 0,640 185,747 370,853 554,747 739,640 739,525 739,525 739,476 739,427 739,378 653,427 370,589 86,427 86,427 86,361 185,418 370,524 554,418 653,361 739,311 739,213 739,213 554,107 370,0 185,107 58,180 144,230 228,181 370,100 511,181 652,263 370,425 87,263 87,263 0,213 0,213 0,311 0,378 0,427 0,476 86,525 185,582 370,689 554,582 653,525 653,590 653,592"

            --
            , fill (Color.toCssString UI.Kit.colors.text)
            ]
            []
        ]


solidLogo : Svg Never
solidLogo =
    svg
        [ height "16"
        , viewBox "0 0 1200 1200"
        , width "16"
        ]
        [ Svg.path
            [ fill (Color.toCssString UI.Kit.colors.text)
            , d "M280.6,1021.9L61.1,641.2c-20.4-35.3-20.4-78.8,0-114l219.5-380.8c20.5-35.4,58.2-57.1,98.9-57.1 h439c40.7,0,78.5,21.7,98.9,57.1L1137.1,527c20.4,35.3,20.4,78.8,0,114l-219.6,381c-20.5,35.4-58.2,57.1-98.9,57.1H379.7 C338.8,1079.1,301.1,1057.3,280.6,1021.9z"
            ]
            []
        , Svg.path
            [ fill "#fff"
            , d "M377.9,510.9h451.7c5.7,0,10.2-4.6,10.2-10.2v-84.7c0-56.3-45.7-102-102-102H466.6 c-78.9-0.1-142.8,63.8-142.8,142.7l0,0C323.7,486.8,347.9,510.9,377.9,510.9z"
            ]
            []
        , Svg.path
            [ fill "#fff"
            , d "M422.2,885.1h269.9c81.5,0,147.7-66.2,147.7-147.7l0,0c0-27.2-22-49.3-49.3-49.3H333.6 c-5.6,0-9.8,4.5-9.8,9.8v88.6C323.7,841,367.9,885.1,422.2,885.1z"
            ]
            []
        , Svg.path
            [ fill "#fff"
            , d "M343.8,499.7l336.9,336.9c22.3,22.3,58.4,22.3,80.7,0l58.4-58.4c22.3-22.3,22.3-58.4,0-80.7 L483,360.6c-22.3-22.3-58.4-22.3-80.7,0L343.9,419C321.4,441.3,321.4,477.5,343.8,499.7z"
            ]
            []

        --
        , polygon
            [ fill "#444"
            , fillOpacity "0.3"
            , points "686.2,842.3 488.3,688.1 532.1,688.1"
            ]
            []
        , polygon
            [ fill "#444"
            , fillOpacity "0.3"
            , points "477.4,355 633.3,510.9 686.2,510.9"
            ]
            []
        ]


threeBoxLogo : Svg Never
threeBoxLogo =
    svg
        [ height "16"
        , viewBox "0 0 290 289"
        , width "16"
        ]
        [ Svg.path
            [ fill (Color.toCssString UI.Kit.colors.text)
            , d "m 42,0 h 206 c 23.19596,0 42,18.80404 42,42 v 205 c 0,23.19596 -18.80404,42 -42,42 H 42 C 18.80404,289 0,270.19596 0,247 V 42 C 0,18.80404 18.80404,0 42,0 Z m 104.4375,47.823 c -8.54404,0 -16.53171,1.179238 -23.96325,3.53775 -7.43154,2.358512 -14.01747,5.873977 -19.758,10.5465 -5.740529,4.672523 -10.524231,10.501965 -14.35125,17.4885 -3.827019,6.986535 -6.407993,15.107704 -7.743,24.36375 l 17.355,3.0705 c 1.602008,0.267 3.11499,0.4005 4.539,0.4005 3.02602,0 5.47349,-0.73424 7.3425,-2.20275 1.86901,-1.46851 3.33749,-3.89373 4.4055,-7.27575 2.04701,-6.497032 5.65147,-11.814729 10.8135,-15.95325 5.16203,-4.138521 11.65896,-6.20775 19.491,-6.20775 8.63304,0 15.44147,2.336227 20.4255,7.00875 4.98402,4.672523 7.476,11.592204 7.476,20.75925 0,4.27202 -0.62299,8.18798 -1.869,11.748 -1.24601,3.56002 -3.44873,6.60824 -6.60825,9.14475 -3.15952,2.53651 -7.40922,4.51674 -12.74925,5.94075 -5.34003,1.42401 -12.05946,2.1805 -20.1585,2.2695 v 23.496 c 9.79005,0 17.59972,0.75649 23.42925,2.2695 5.82953,1.51301 10.30173,3.60449 13.41675,6.2745 3.11502,2.67001 5.16199,5.89623 6.141,9.67875 0.979,3.78252 1.4685,7.98773 1.4685,12.61575 0,3.64902 -0.68974,7.27573 -2.06925,10.88025 -1.37951,3.60452 -3.47099,6.87523 -6.2745,9.81225 -2.80351,2.93701 -6.29673,5.31774 -10.47975,7.14225 -4.18302,1.82451 -9.07797,2.73675 -14.685,2.73675 -4.98403,0 -9.27823,-0.73424 -12.88275,-2.20275 -3.60452,-1.46851 -6.74174,-3.38199 -9.41175,-5.7405 -2.67001,-2.35851 -4.96174,-5.05073 -6.87525,-8.07675 -1.91351,-3.02602 -3.67124,-6.09648 -5.27325,-9.2115 -0.97901,-1.86901 -2.38074,-3.293 -4.20525,-4.272 -1.82451,-0.97901 -3.893738,-1.4685 -6.20775,-1.4685 -2.581013,0 -5.117487,0.53399 -7.6095,1.602 l -14.5515,6.0075 c 2.670013,8.27704 5.873981,15.57497 9.612,21.894 3.738019,6.31903 8.276973,11.65898 13.617,16.02 5.34003,4.36102 11.61446,7.65399 18.8235,9.879 7.20904,2.22501 15.66395,3.3375 25.365,3.3375 8.90004,0 17.33271,-1.29049 25.29825,-3.8715 7.96554,-2.58101 14.97422,-6.38573 21.02625,-11.41425 6.05203,-5.02853 10.85798,-11.23621 14.418,-18.62325 3.56002,-7.38704 5.34,-15.88645 5.34,-25.4985 0,-11.30306 -2.84797,-20.69246 -8.544,-28.1685 -5.69603,-7.47604 -14.32894,-13.03848 -25.899,-16.6875 4.80602,-1.60201 9.10023,-3.60449 12.88275,-6.0075 3.78252,-2.40301 6.98649,-5.33998 9.612,-8.811 2.62551,-3.47102 4.62799,-7.54273 6.0075,-12.21525 1.37951,-4.67252 2.06925,-10.07922 2.06925,-16.22025 0,-7.031035 -1.35724,-13.57247 -4.07175,-19.6245 C 197.85724,71.94197 193.96352,66.668773 188.8905,62.17425 183.81747,57.679727 177.69879,54.164263 170.53425,51.62775 163.36971,49.091237 155.33754,47.823 146.4375,47.823 Z"
            ]
            []
        ]



-- LOADING ANIMATION


loading : Svg Never
loading =
    svg
        [ class "loading-animation"
        , height "29"
        , viewBox "0 0 30 30"
        , width "29"
        ]
        [ circle
            [ class "loading-animation__circle"
            , cx "15"
            , cy "15"
            , fill "none"
            , r "14"
            , strokeLinecap "round"
            , strokeWidth "2"
            ]
            []
        ]



-- TEXTILE


textileLogo : Svg Never
textileLogo =
    svg
        [ fill (Color.toCssString UI.Kit.colors.text)
        , height "16"
        , viewBox "0 0 4030 4050"
        , width "16"
        ]
        [ g
            [ fillOpacity "1", stroke "none" ]
            [ Svg.path [ d "M305 3150 l-280 -280 288 0 287 0 0 280 c0 154 -3 280 -8 280 -4 0 -133 -126 -287 -280z" ] []
            , Svg.path [ d "M1160 3150 l0 -280 282 0 283 0 -280 280 c-154 154 -281 280 -282 280 -2 0 -3 -126 -3 -280z" ] []
            , Svg.path [ d "M2575 2580 l-280 -280 283 0 282 0 0 280 c0 154 -1 280 -3 280 -1 0 -128 -126 -282 -280z" ] []
            , Svg.path [ d "M1155 1735 l-570 -564 573 -1 572 0 0 565 c0 311 -1 565 -2 565 -2 -1 -259 -255 -573 -565z" ] []
            , Svg.path [ d "M2575 1460 l280 -280 -280 -2 -280 -3 -3 -282 c-1 -156 1 -283 5 -283 5 0 133 125 286 278 l277 277 0 288 0 287 -282 0 -283 0 280 -280z" ] []
            ]
        , g
            [ fillOpacity "0.5", stroke "none" ]
            [ Svg.path [ d "M870 3715 l-285 -285 575 0 575 0 -285 285 c-157 157 -287 285 -290 285 -3 0 -133 -128 -290 -285z" ] []
            , Svg.path [ d "M30 2862 c0 -6 373 -380 923 -922 l207 -205 0 568 0 567 -565 0 c-311 0 -565 -3 -565 -8z" ] []
            , Svg.path [ d "M2007 2582 l-277 -277 0 -568 0 -567 148 0 c81 0 333 3 560 7 l414 6 -276 276 -276 276 0 563 c0 309 -3 562 -8 562 -4 0 -132 -125 -285 -278z" ] []
            , Svg.path [ d "M2860 1733 l0 -568 565 565 c311 311 565 566 565 567 0 2 -254 3 -565 3 l-565 0 0 -567z" ] []
            , Svg.path [ d "M1443 323 l287 -288 287 288 288 287 -575 0 -575 0 288 -287z" ] []
            ]
        , g
            [ fillOpacity "1", stroke "none" ]
            [ Svg.path [ d "M2860 2865 l0 -565 565 0 c311 0 565 3 565 8 0 9 -1113 1122 -1123 1122 -4 0 -7 -254 -7 -565z" ] []
            , Svg.path [ d "M1160 2310 c0 -308 3 -560 8 -560 4 0 259 252 567 560 l560 560 -568 0 -567 0 0 -560z" ] []
            , Svg.path [ d "M1440 895 c151 -151 278 -275 282 -275 5 0 8 124 8 275 l0 275 -282 0 -283 0 275 -275z" ] []
            ]
        , g
            [ fillOpacity "0.75", stroke "none" ]
            [ Svg.path [ d "M2576 3161 l-279 -280 -281 274 -281 274 -285 1 -285 0 280 -280 280 -280 285 -2 285 -3 5 -278 5 -277 277 277 278 278 2 288 c2 158 1 287 -2 287 -3 0 -131 -126 -284 -279z" ] []
            , Svg.path [ d "M600 3150 l0 -280 280 0 280 0 0 280 0 280 -280 0 -280 0 0 -280z" ] []
            , Svg.path [ d "M2300 2020 l0 -280 280 0 280 0 0 280 0 280 -280 0 -280 0 0 -280z" ] []
            , Svg.path [ d "M875 890 l280 -280 567 0 568 0 0 280 0 280 -280 0 -280 0 0 -275 c0 -151 -3 -275 -8 -275 -4 0 -131 124 -282 275 l-275 275 -285 0 -285 0 280 -280z" ] []
            ]
        ]
